<nz-card [nzTitle]="l('SignUp')">
    <form nz-form #registerForm="ngForm" (ngSubmit)="save()" role="form" novalidate method="post">
        <nz-form-item>
            <nz-form-control [nzErrorTip]="nameValidationTpl" nzHasFeedback>
                <input nz-input name="Name" #nameInput='ngModel' [(ngModel)]="model.name" placeholder="{{'Name' | localize}}"
                    required maxlength="64">
                <ng-template #nameValidationTpl let-control>
                    <validation-messages [formCtrl]="control"></validation-messages>
                </ng-template>
            </nz-form-control>
        </nz-form-item>

        <nz-form-item>
            <nz-form-control [nzErrorTip]="surnameValidationTpl" nzHasFeedback>
                <input nz-input name="Surname" #surnameInput="ngModel" [(ngModel)]="model.surname" placeholder="{{'Surname' | localize}}"
                    required maxlength="64">
                <ng-template #surnameValidationTpl let-control>
                    <validation-messages [formCtrl]="control"></validation-messages>
                </ng-template>
            </nz-form-control>
        </nz-form-item>

        <nz-form-item>
            <nz-form-control [nzErrorTip]="emailValidationTpl" nzHasFeedback>
                <input nz-input type="email" name="EmailAddress" #emailAddressInput="ngModel" [(ngModel)]="model.emailAddress"
                    placeholder="{{'EmailAddress' | localize}}" required maxlength="256" email>
                <ng-template #emailValidationTpl let-control>
                    <validation-messages [formCtrl]="control"></validation-messages>
                </ng-template>
            </nz-form-control>
        </nz-form-item>

        <nz-form-item>
            <nz-form-control [nzErrorTip]="usernameValidationTpl" nzHasFeedback>
                <input nz-input name="UserName" autocomplete="off" #userNameInput="ngModel" [(ngModel)]="model.userName"
                    placeholder="{{'UserName' | localize}}" required maxlength="256">
                <ng-template #usernameValidationTpl let-control>
                    <validation-messages [formCtrl]="control"></validation-messages>
                </ng-template>
            </nz-form-control>
        </nz-form-item>

        <nz-form-item>
            <nz-form-control [nzErrorTip]="passwordValidationTpl" nzHasFeedback>
                <input nz-input type="password" name="Password" class="form-control" [(ngModel)]="model.password"
                    #Password="ngModel" placeholder="{{'Password' | localize}}" validateEqual="PasswordRepeat" reverse="true"
                    [requireDigit]="passwordComplexitySetting.requireDigit" [requireLowercase]="passwordComplexitySetting.requireLowercase"
                    [requireUppercase]="passwordComplexitySetting.requireUppercase" [requireNonAlphanumeric]="passwordComplexitySetting.requireNonAlphanumeric"
                    [requiredLength]="passwordComplexitySetting.requiredLength" required>
                <ng-template #passwordValidationTpl let-control>
                    <ul *ngIf="control.errors">
                        <li [hidden]="!control.errors.requireDigit">{{"PasswordComplexity_RequireDigit_Hint" | localize}}</li>
                        <li [hidden]="!control.errors.requireLowercase">{{"PasswordComplexity_RequireLowercase_Hint" | localize}}</li>
                        <li [hidden]="!control.errors.requireUppercase">{{"PasswordComplexity_RequireUppercase_Hint" | localize}}</li>
                        <li [hidden]="!control.errors.requireNonAlphanumeric">{{"PasswordComplexity_RequireNonAlphanumeric_Hint" | localize}}</li>
                        <li [hidden]="!control.errors.requiredLength">{{"PasswordComplexity_RequiredLength_Hint" | localize:passwordComplexitySetting.requiredLength}}</li>
                    </ul>
                </ng-template>
            </nz-form-control>
        </nz-form-item>

        <nz-form-item>
            <nz-form-control [nzErrorTip]="passwordRepeatValidationTpl" nzHasFeedback>
                <input nz-input type="password" name="PasswordRepeat" class="form-control" [ngModel]="model.passwordRepeat"
                    #PasswordRepeat="ngModel" placeholder="{{'PasswordRepeat' | localize}}" validateEqual="Password" reverse="false"
                    [requireDigit]="passwordComplexitySetting.requireDigit" [requireLowercase]="passwordComplexitySetting.requireLowercase"
                    [requireUppercase]="passwordComplexitySetting.requireUppercase" [requireNonAlphanumeric]="passwordComplexitySetting.requireNonAlphanumeric"
                    [requiredLength]="passwordComplexitySetting.requiredLength" required>
                <ng-template #passwordRepeatValidationTpl let-control>
                    <ul *ngIf="control.errors">
                        <li [hidden]="!control.errors.requireDigit">{{"PasswordComplexity_RequireDigit_Hint" | localize}}</li>
                        <li [hidden]="!control.errors.requireLowercase">{{"PasswordComplexity_RequireLowercase_Hint" | localize}}</li>
                        <li [hidden]="!control.errors.requireUppercase">{{"PasswordComplexity_RequireUppercase_Hint" | localize}}</li>
                        <li [hidden]="!control.errors.requireNonAlphanumeric">{{"PasswordComplexity_RequireNonAlphanumeric_Hint" | localize}}</li>
                        <li [hidden]="!control.errors.requiredLength">{{"PasswordComplexity_RequiredLength_Hint" | localize:passwordComplexitySetting.requiredLength}}</li>
                        <li [hidden]="control.valid">{{"PasswordsDontMatch" | localize}}</li>
                    </ul>
                </ng-template>
            </nz-form-control>
        </nz-form-item>
        <nz-form-item nz-row nzGutter="8">
            <nz-col nzSm="12">
                <button nz-button nzType="primary" nzSize="large" type="submit" [nzLoading]="saving" [disabled]="!registerForm.form.valid||saving" nzBlock>
                    {{"Register" | localize}}
                </button>
            </nz-col>
            <nz-col nzSm="12">
                <button nz-button nzType="default" nzSize="large" type="button" [disabled]="saving" routerLink="/account/login"
                    nzBlock>{{"Back" | localize}}</button>
            </nz-col>
        </nz-form-item>
    </form>
</nz-card>